<template>
  <div class="order">
    <div class="icon">
      <van-icon name="arrow-up" />
    </div>
    <div class="haed">
      <div class="jiantou">
        <div class="login_title"></div>
      </div>
      <van-tabs v-model="active" class="allMain">
        <van-tab title="全部">
          <div class="sousuo">
            <van-search
              style="width:78%; display: inline-block;"
              v-model="value"
              placeholder="搜索全部订单"
            />
            <van-button
              style=" display: inline-block; border-radius:15%;width:70px; height: 33px;background-color: peru;"
            >搜索</van-button>
          </div>
          <div class="main">
            <van-card
              v-for="i in CartList"
              :key="i._id"
              class="daner"
              :num="i.num"
              :price="i.price"
              :desc="i.name"
              title="商品标题"
              :thumb="i.coverImg"
            >
              <template #footer>
                更多
                <van-button size="mini">买了否冷</van-button>
                <van-button size="mini">卖了换钱</van-button>
                <van-button size="mini">评价</van-button>
              </template>
            </van-card>
          </div>
        </van-tab>
        <van-tab title="待付款">
          <div class="sousuo">
            <van-search
              style="width:78%; display: inline-block;"
              v-model="value"
              placeholder="搜索全部订单"
            />
            <van-button
              style=" display: inline-block; border-radius:15%;width:70px; height: 33px;background-color: peru;"
            >搜索</van-button>
          </div>
          <div class="main">
            <van-card
              v-for="i in CartList"
              :key="i._id"
              class="daner"
              :num="i.num"
              :price="i.price"
              :desc="i.name"
              title="商品标题"
              :thumb="i.coverImg"
            >
              <van-hr></van-hr>
              <!-- <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag>
              </template>-->
              <template #footer>
                更多
                <van-button size="mini">去买它</van-button>
              </template>
            </van-card>
          </div>
        </van-tab>
        <van-tab title="待发货">
          <div class="sousuo">
            <van-search
              style="width:78%; display: inline-block;"
              v-model="value"
              placeholder="搜索全部订单"
            />
            <van-button
              style=" display: inline-block; border-radius:15%;width:70px; height: 33px;background-color: peru;"
            >搜索</van-button>
          </div>
          <div class="main">
            <van-card
              v-for="i in CartList"
              :key="i._id"
              class="daner"
              :num="i.num"
              :price="i.price"
              :desc="i.name"
              title="商品标题"
              :thumb="i.coverImg"
            >
              <van-hr></van-hr>
              <!-- <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag>
              </template>-->
              <template #footer>
                更多
                <van-button size="mini">提醒发货</van-button>
              </template>
            </van-card>
          </div>
        </van-tab>
        <van-tab title="待收货">
          <div class="sousuo">
            <van-search
              style="width:78%; display: inline-block;"
              v-model="value"
              placeholder="搜索全部订单"
            />
            <van-button
              style=" display: inline-block; border-radius:15%;width:70px; height: 33px;background-color: peru;"
            >搜索</van-button>
          </div>
          <div class="main">
            <van-card
              v-for="i in CartList"
              :key="i._id"
              class="daner"
              :num="i.num"
              :price="i.price"
              :desc="i.name"
              title="商品标题"
              :thumb="i.coverImg"
            >
              <van-hr></van-hr>
              <!-- <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag>
              </template>-->
              <template #footer>
                更多
                <van-button size="mini">确认收货</van-button>
              </template>
            </van-card>
          </div>
        </van-tab>
        <van-tab title="待评价">
          <div class="sousuo">
            <van-search
              style="width:78%; display: inline-block;"
              v-model="value"
              placeholder="搜索全部订单"
            />
            <van-button
              style=" display: inline-block; border-radius:15%;width:70px; height: 33px;background-color: peru;"
            >搜索</van-button>
          </div>
          <div class="main">
            <van-card
              v-for="i in 4"
              :key="i"
              class="daner"
              :num="i.num"
              :price="i.price"
              desc="描述信息"
              title="商品标题"
              thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
            >
              <van-hr></van-hr>
              <!-- <template #tags>
                <van-tag plain type="danger">标签</van-tag>
                <van-tag plain type="danger">标签</van-tag>
              </template>-->
              <template #footer>
                <van-button size="mini">评价</van-button>
              </template>
            </van-card>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: "",
      active: 0,
      CartList: [
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 55.3,
          _id: "5f44db6101cd5428682f3ba2",
          name: "小包包女包2020新款时尚菱格链条单肩斜挎包ins百搭小方包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/c45406/200622_75ggcd0e13ccjb9aj1531dgc7l8a7_640x960.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 29.9,
          _id: "5f44db6101cd5428682f3ba3",
          name: "韩版帆布ins包包女2020新款可爱熊胸包百搭单肩斜挎修腰包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/c45406/200530_02jl1e3i7akhbi3k449g4dg0a58le_1000x1500.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 47.3,
          _id: "5f44db6101cd5428682f3ba4",
          name: "时尚宽带小包包洋气女包2020新款潮韩版百搭斜挎包单肩水桶包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/55cf19/200625_13i11f7h38646big9i8kjkh596487_640x960.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 55.3,
          _id: "5f44db6101cd5428682f3ba2",
          name: "小包包女包2020新款时尚菱格链条单肩斜挎包ins百搭小方包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/c45406/200622_75ggcd0e13ccjb9aj1531dgc7l8a7_640x960.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 29.9,
          _id: "5f44db6101cd5428682f3ba3",
          name: "韩版帆布ins包包女2020新款可爱熊胸包百搭单肩斜挎修腰包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/c45406/200530_02jl1e3i7akhbi3k449g4dg0a58le_1000x1500.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
        {
          onSale: false,
          content: "",
          quantity: 10,
          price: 47.3,
          _id: "5f44db6101cd5428682f3ba4",
          name: "时尚宽带小包包洋气女包2020新款潮韩版百搭斜挎包单肩水桶包",
          // 新增
          num: 2,
          checked: false,
          // 新增结束
          descriptions: "",
          coverImg:
            "https://s5.mogucdn.com/mlcdn/55cf19/200625_13i11f7h38646big9i8kjkh596487_640x960.jpg",
          productCategory: {
            _id: "5f44db6101cd5428682f314f",
            name: "包包",
            __v: 0,
            createdAt: "2020-08-25T09:35:29.061Z",
            updatedAt: "2020-08-25T09:35:29.061Z",
          },
          __v: 0,
          createdAt: "2020-08-25T09:35:29.959Z",
          updatedAt: "2020-08-25T09:35:29.959Z",
        },
      ],
    };
  },
  methods: {
    daifukuan() {
      this.$router.push({
        name: "daifukuan",
      });
    },
    back() {
      // this.$router.push({
      //   name: "SortList",
      // });
      history.go(-1);
    },
  },
  created() {
    console.log(this.$store.state.OrderName);
    if (this.$store.state.OrderName == "待付款") {
      this.active = 1;
    }
    if (this.$store.state.OrderName == "待发货") {
      this.active = 2;
    }
    if (this.$store.state.OrderName == "待收货") {
      this.active = 3;
    }
    if (this.$store.state.OrderName == "评价") {
      this.active = 4;
    }
  },
};
</script>
<style scope>
body {
  height: 92%;
  position: relative;
}
.order {
  height: 50%;
  margin-top: 30px;
}
.daner {
  height: 150px;
  width: 90%;
  margin: 0 auto;
}
.main {
  flex: 1;
}
.wrap {
  margin-top: 30px;
  display: flex;
}
.title {
  margin-top: 50px;
}
.allMain {
  margin-top: 50px;
}
.jiantou {
  width: 100%;
  height: 50px;
  font-size: 24px;
  text-align: center;
  line-height: 50px;
  color: chocolate;
  background: #f8fbf8;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 99999;
}
.back {
  font-size: 20px;
  height: 25px;
  width: 26px;
  margin: 0;
  margin-left: 20px;
  background: #cccccc;
  border-radius: 50%;
  margin-top: 10px;
  padding-left: 4px;
  padding-top: 6px;
}
.login_title {
  height: 70px;
  background: url(https://s1.ax1x.com/2020/08/27/dhu9yQ.png);
  background-size: 150% 70px;
  margin-bottom: 20px;
  position: relative;
}
.login_title p {
  position: absolute;
  left: 50%;
  bottom: 3px;
  font-size: 18px;
  line-height: 0;
}
.icon {
  width: 20px;
  height: 20px;
  background-color: red;
}
</style>